<template>
  <div>
    <van-sticky>
      <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" />
    </van-sticky>

    <van-index-bar :index-list="indexList">
      <van-index-anchor v-for="item in indexList" :key="item" :index="item">
        {{ item }}
        <van-cell
          :title="item.label"
          v-for="(item, index) in newList[item]"
          :key="index"
          @click="btn(item)"
        ></van-cell>
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { level } from "@/api/house";
export default {
  name: "city-align",
  components: {},
  props: {},
  data() {
    return {
      indexList: [],
      list: [],
      newList: [],
    };
  },
  async created() {
    const data = await level();
    this.list = data.body;
    this.list.forEach((item) => {
      const firs = item.short.slice(0, 1).toUpperCase();
      if (this.newList[firs]) {
        this.newList[firs].push(item);
      } else {
        this.newList[firs] = [item];
      }
    });
    this.indexList = Object.keys(this.newList).sort();
  },
  methods: {
    onClickLeft() {
      this.$router.push("/article");
    },
    btn(item) {
      console.log(item);
      localStorage.setItem("city", JSON.stringify(item.label));
      this.$router.push("/article");
    },
  },
};
</script>

<style scoped></style>
